<template>
    <div class="container">
      <swiper class="titleImg" autoplay interval="3000" indicator-dots>
        <swiper-item v-for="(value,index) in bannerImg">
            <img :src="value.img_url" class="titleImg" @click="goDetails(value.link_url)" mode="aspectFit"/>
        </swiper-item>
      </swiper>
      <img :src="processImg" v-if="processImg == null ? false : true" class="processImg" />

      <img :src="activity_draw != null ?activity_draw.img_url :''" v-if="activity_draw == null ? false : true" class="articleImg" @click="goDetails1(activity_draw != null ?activity_draw.link_url :'')"/>
      <div class="desgin">
        <div class="design_title">
          <span><img src="http://file.rzkeji.com/web/loveciy/img/design.png" class="designImg"/>自定义定制</span>
          <span class="designMore"><navigator url="../classify/main" open-type="switchTab">MORE></navigator></span>
        </div>
        <img :src="designContent.img_url" class="designContent" @click="goDetails(designContent.link_url)"/>
      </div>
      <inda :motto="designImg" :motto1="designArry"></inda>
      <img :src="articleImg.img_url" class="articleImg" @click="goDetails(articleImg.link_url)"/>
      <div class="desgin">
        <div class="design_title">
            <span><img src="http://file.rzkeji.com/web/loveciy/img/show.png" class="designImg"/>SHOW</span>
            <span class="designMore"><navigator url="../circle/main" open-type="switchTab">MORE></navigator></span>
        </div>
        <inda :motto="showImg" :motto1="showArry"></inda>
      </div>
      <div class="desgin">
        <div class="design_title">
            <span><img src="http://file.rzkeji.com/web/loveciy/img/rocket.png" class="designImg"/>脑洞计划</span>
            <span class="designMore"><navigator url="../plan/main" open-type="switchTab">MORE></navigator></span>
        </div>
        <img :src="planBanner.img_url" class="planBanner" @click="goDetails(planBanner.link_url)"/>
        <inda :motto="planImg" :motto1="planArry"></inda>
      </div>
      <div class="planGo">
        <img :src="activity_bargain != null ?activity_bargain.img_url :''" v-if="activity_bargain == null ? false : true" class="articleImg" @click="goDetails1(activity_bargain != null ?activity_bargain.link_url :'')"/>
        <img :src="planBanner2.img_url" class="planBanner2" @click="goDetails(planBanner2.link_url)"/>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>

      <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://file.loveciy.net/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
      </div>
      <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
      </div>
    </div>
</template>

<script>
import inda from '@/components/swiper'
export default {
  data () {
    return {
      bannerImg:[],
      planBanner:"",
      articleImg:"",
      planBanner2:"",
      processImg:"",
      designContent:"",
      designImg:[],
      desginArry:[],
      showImg:[],
      showArry:[],
      planImg:[],
      planArry:[],
      showIndex:"",
      activity_draw:"",
      activity_bargain:""
    }
  },
  components: {
    inda
  },
  methods: {
   goDetails(src){   //点击跳转到文章列表
   	console.log(src)
    this.$currency.goDetails(src)
   },
   goDetails1(src){   //点击跳转到文章列表
    if(src!=null){
      wx.navigateTo({
        url:src
      })
    }
   },
   getData(res,type){
      var arr=[];
      var _this=this;
      for(let [index,value] of res.entries())
      {
        arr.push({
          imgSrc:_this.getTag(value,type,'imgSrc'),
          content1:_this.getTag(value,type,'content1'),
          content2:_this.getTag(value,type,'content2'),
          //设置img的样式，因为在首页的swiper照片的大小不一样，为了套用一个模板所以需要传数据进去
          imgStyle:_this.getTag(value,type,'imgStyle'),
          tag:_this.getTag(value,type,'tag'),    //这个tag用来判断是否自定义定制
          shopId:value.id,
        })
      }
      return arr;
   },
    getTag(res,type,data){
      //处理imgSrc
      if((type=='designImg'&& data=='imgSrc') || (type=='planImg' && data=='imgSrc')){
        return res.thumb_img_url
      }else if(type=='showImg'&& data=='imgSrc'){
        return res.img_url
      }
      //处理tag
      if((type=='designImg' && data=='tag') || (type=='planImg' && data=='tag')){
        return 0
      }else if(type=='showImg'&& data=='tag'){
        return 1
      }
      //处理content1
      if((type=='designImg' && data=='content1') || (type=='planImg' && data=='content1')){
        return res.name
      }else if(type=='showImg'&& data=='content1'){
        return ""
      }
      //处理content2
      if( type=='designImg' && data=='content2' ){
        return "立即定制"
      }else if( type=='planImg' && data=='content2' ){
        return res.sale_time+"截止"
      }else if(type=='showImg'&& data=='content2'){
        return ""
      }
      //imgStyle
      if((type=='designImg' && data=='imgStyle') || (type=='planImg' && data=='imgStyle')){
        return {
          width:'110px',   
          height:'100px'
        }
      }else if(type=='showImg'&& data=='imgStyle'){
        return {
          width:'172.5px',   
          height:'140px'
        }
      }
    },
   selectImg(value1){
    var _this=this;
    var arry=[];
    if(value1!=[])
    {
      for(let [index,value] of value1.entries())   //把arry的所有照片都设为不显示
      {
        arry.push(false)
      }
        _this.showIndex=Math.ceil(wx.getSystemInfoSync().windowWidth/(parseInt(value1[0].imgStyle.width.slice(0,-2))+15));
      for(let [index1,value] of arry.entries())   //判断当前初始化时候显示多少张照片
      {
        if(index1<_this.showIndex)
        {
          arry[index1]=true;
        }
      };
      return arry;
    }
   }
  },
  onLoad(){
    //获取banner列表
    var _this=this;
    wx.showNavigationBarLoading()
    _this.$request.getData("https://zlz.loveciy.net/api/other/get-banner-list").then(res =>{
      var res=res.data.data;
      _this.processImg=res.advert_img_url;
      _this.bannerImg=[]
      for(let [index,value] of res.banner_list.entries()){
        _this.bannerImg.push({img_url:value.img_url,link_url:value.link_url})
      }
    })

    //获取首页各类信息的接口
    var _this=this;
    _this.$request.getData("https://zlz.loveciy.net/api/goods/get-home-info").then(res =>{
      var res=res.data.data;
      _this.designContent=res.custom_info;
      _this.activity_draw=res.activity_draw_info;
      _this.activity_bargain=res.activity_bargain_info;
      console.log(_this.activity_draw)
      console.log(_this.activity_bargain)
      _this.articleImg=res.middle_info;
      _this.planBanner=res.plan_info;
      _this.planBanner2=res.bottom_info;
      //自定义定制数据渲染开始
      
      _this.designImg=_this.getData(res.custom_goods_list,'designImg')  
      _this.designArry=_this.selectImg(_this.designImg)
      //自定义定制数据渲染结束 
      //SHOW数据渲染开始
      _this.showImg=_this.getData(res.article_img_list,'showImg')
      _this.showArry=_this.selectImg(_this.showImg)
      console.log(_this.showImg)
      //SHOW数据渲染结束
      //脑洞计划数据渲染开始
      _this.planImg=_this.getData(res.taobao_goods_list,'planImg')
      _this.planArry=_this.selectImg(_this.planImg)
      //脑洞计划数据渲染结束
      wx.hideNavigationBarLoading()
    })
  },
  onShareAppMessage: function (res) {   //分享
    // this.$currency.share(res,'首页分享','/pages/home/main')
    return{
      title:"原创定制品牌：团体服\/班服\/潮牌设计",
      path:"/pages/home/main",
      imageUrl:"http://file.rzkeji.com/web/share/share-img.jpg",
      success(e){
        wx.showShareMenu({
          widthShareTicket:true
        });
      },
      fail(e){

      },
      complete(){

      }
    }
  }
}
</script>

<style scoped>
.container{width: 100%;background: #f2f2f2;}
.titleImg{width: 100%;height: 227px;display: block;}
.processImg{width: 100%;height: 166px;display: block;margin-top: 10px;}
.desgin{width: 100%;margin-top: 10px;background: white;}
.design_title{width: 100%;height: 40px;line-height: 40px; border-bottom: 0.5px solid #cccccc}
.design_title span:nth-of-type(1){font-size: 15px;font-weight: 700;}
.design_title span:nth-of-type(2){font-size: 12px;float: right;margin-right: 10px;color: #666666}
.designImg{width: 25px;height:25px;vertical-align:middle;margin-right:10px;margin-left: 10px}
.designContent{width: 100%;height: 166px;}
.articleImg{width: 100%;height:166px;margin-top: 10px;display: block}
.planBanner{width: 100%;height:166px;margin-top: 10px; }
.planGo{width: 100%;margin-top: 10px;}
.planBanner2{width: 100%;height: 182px;display: block;margin-top:10px;}
.footer{width: 100%;display: block;height: 36px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 20px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
</style>
